<template>
  <div class="time-container">
    {{ currentTime }}
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
// 获取当前时间
// const currentTime = ref(new Date().toLocaleString());
//
// const updateTime = () => {
//   currentTime.value = new Date().toLocaleString();
// };

// 使用Intl.DateTimeFormat格式化日期
const formatDate = (date: Date) => {
  // 使用Intl.DateTimeFormat格式化日期
  const formattedDate = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  }).format(date);

  // 替换分隔符
  return formattedDate.replace(/\//g, '.');
};
// 获取当前时间
const currentTime = ref(formatDate(new Date()));

const updateTime = () => {
  currentTime.value = formatDate(new Date());
};
onMounted(() => {
  const interval = setInterval(updateTime, 1000);
  onUnmounted(() => {
    clearInterval(interval);
  });
});
</script>

<style scoped>
.time-container {
  font-size: 20px;
  //font-weight: bold;
  color: #fff;
}
</style>
